<!-- 上传图片 -->
<script lang='ts' setup>
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { userInfoStore } from '@/stores/userInfo'
const userInfo = userInfoStore()
// 上传组件的显示与否
//上传图片
const imgSrc = new URL('../../assets/photo/photo.png', import.meta.url).href
let file = null
let imgages = null
let files: any = null

//选择文件时进行预览
function asd() {
    file = document.getElementById('file') as any
    imgages = document.getElementById('imgages') as any
    //获取文件的files  单文件上传
    files = file.files[0]
    for (const filess of file.files) {
        imgages.src = URL.createObjectURL(filess);
    }
}
//取消 退出上传界面
const emit = defineEmits(['cancel'])
function cancel() {
    let param = false
    emit('cancel', param)
}
async function doUpload() {
    console.log("asd", files)
    if (files == null || files == undefined) {
        return alert('暂未获取到图片信息')
    }
    let formdata = new FormData();
    //  formdata.append的属性名 要和后端保持一致 `file`
    formdata.append('file', files, files.name);
    let result = await axios.post('http://127.0.0.1:3100/uploadPicture/uploadPicture', formdata, {
        headers: {
            Authorization: localStorage.getItem('token') || ' ',
            'Content-Type': 'multipart/form-data',
        }
    })
    console.log("wwwww", result.data.errno);
    if (result.data.errno === 0) {
        ElMessage({
            showClose: true,
            message: '上传成功',
            type: 'success',
        })
        //上传成功同步修改 store里面的数据
        userInfo.userInfo!.files = result.data.data.url
        userInfo.photo = result.data.data.url
        console.log(result.data.data.url);
        cancel()
    }
}
window.document.onkeydown = function (event) {
    if (event.code === 'Escape') {
        cancel()
    }
}
</script>
<template>
    <div id="changePhoto">
        <div class="updContent">
            <div class="updContent_head">
                <h3>请选择你的图片</h3>
            </div>
            <div class="updContent_box">
                <div class="uploadPic">
                    <input type="file" id="file" @change="asd()">
                    <el-button type="success" @click="doUpload">
                        上传
                    </el-button>
                    <el-button type="warning" @click="cancel()">
                        取消
                    </el-button>
                    <div class="el-upload__tip">
                        jpg/png files with a size less than 500kb<br />
                        (Esc 可快速退出本界面)
                    </div>
                </div>
                <div class="preview">
                    <span>预览</span>
                    <img id="imgages" class="previewPic" :src="imgSrc" alt="">
                </div>
            </div>
        </div>
    </div>
</template>
<style lang='scss' scoped>
$baseRate: 3; //头像同比例缩放参数

#changePhoto {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.315);
    z-index: 9999;

    .updContent {
        width: 700px;
        height: 300px;
        border-radius: 10px;
        background-color: rgb(253, 251, 251);
        box-sizing: border-box;
        padding: 20px;

        .updContent_box {
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 50%;

            .preview {
                width: 67px*$baseRate;
                height: 67px*$baseRate;
                border-radius: 10px;
                background-color: rgba(128, 128, 128, 0.459);
                color: gray;

                .previewPic {
                    margin-top: -10px;
                    margin-left: 10px;
                    width: 90%;
                    height: 90%;
                    border-radius: 100%;
                }
            }
        }

        .uploadPic {
            margin-top: 50px;
        }
    }
}
</style>
